<template>
  <el-drawer
    title="选择图片"
    size="80%"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose">
    <div class="fill-width-height flex-col" style="overflow: hidden">

      <CollectionManage ref="collectionManageRef" v-if="cardtype === 'coll'" :isEdit="false"/>

      <ImgManage
        ref="imgManageRef"
        :isSelect="true"
        :isEdit="false"
        class="flex-1"
        style="overflow: auto"
        v-if="cardtype !== 'coll'"
      />
      <el-divider border-style="double" style="margin: 0"/>
      <div class="d-flex justify-center align-center" style="padding: 12px;">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="submit">提交</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {saveList} from "@/api/imgManage/homeManageDetail";

export default {
  components: {
    ImgManage: () => import('../imgInfoManage/index.vue'),
    CollectionManage: () => import('../collectionManage')
  },
  props: {
    manageId: {},
    cardtype: {}
  },
  data(){
    return {
      drawer: false,
      direction: 'rtl',
      itemObj: {
        imgfileid: '',
        ordernum: ''
      }
    }
  },
  methods: {
    init(){

    },
    open(){
      this.init()
      this.drawer = true

    },
    handleClose(done) {
      done();
    },
    successCallBack(){
      this.$modal.msgSuccess("保存成功")
      this.$emit('callBack')
      this.drawer = false
    },
    submit(){
      let selectData = null
      if(this.cardtype === 'coll'){
        selectData = this.$refs.collectionManageRef.getAllSelectData()
      } else {
        selectData = this.$refs.imgManageRef.getAllSelectData()
      }

      // if(selectData?.length === 0){
      //   return this.$modal.msgWarning("请选择数据！")
      // }
      const submitList = selectData.map((item,index) => {
        const resMap = {
          indexmanageid: this.manageId,
          imgfileid: this.cardtype === 'coll' ? item.id : item.fileid,
          ordernum: index + 1
        }
        return resMap
      }) || []
      saveList(submitList).then(res => {
        this.successCallBack()
      })
    }
  }
}
</script>

<style scoped lang="scss">

</style>
